<!--
 * @Author: jiutian
 * @Date: 2023-02-03 17:07:00
 * @LastEditTime: 2023-03-10 16:52:24
 * @LastEditors:  
-->
<script setup lang="ts">
import { useStore } from "@/store";
import defaultPic from "@imgs/user_default.webp";
import request from "@api";
import { reactive, ref } from "@vue/reactivity";
import Session from "./component/session.vue";
import { computed, onUnmounted } from "@vue/runtime-core";
import _throttle from "loadsh/throttle";
import { ElNotification } from "element-plus";
import { onBeforeRouteLeave } from "vue-router";
import _debounce from "loadsh/debounce";
const store = useStore();
let keyword = ref("");
let bolgerList = reactive({
  focusList: [],
  normalList: [],
});
let list = ref([]);
let replyer = ref({});
let sessionRef = ref();
let timer: object = {};

function getBlogerList() {
  request["check/getBlogerList"]({ params: { keyword: keyword.value } }).then(
    (res: any) => {
      if (res.code == 200) {
        list.value = res.data;
        list.value.forEach((v: any) => {
          if (timer[v.id]) {
            clearInterval(timer[v.id]);
          }
          timer[v.id] = setInterval(() => {
            getUnReadCount(v.id);
          }, 1000);
        });
        bolgerList.focusList = list.value.filter((v: any) => v.focus);
        bolgerList.normalList = list.value;
      }
    }
  );
}

function getUnReadCount(id: number) {
  request["check/getUnReadCount"]({ params: { senderId: id } }).then(
    (res: any) => {
      if (res.code == 200) {
        let index = list.value.findIndex((v: any) => v.id == id);
        list.value[index].unreadCount = res.data.unreadCount;
        bolgerList.focusList = list.value.filter((v: any) => v.focus);
        bolgerList.normalList = list.value;
      }
    }
  );
}

function privateLetter(item: any) {
  sessionRef.value.init(item, store.currentUser);
}

function search() {
  getBlogerList();
}

const debouncSearch = _debounce(function () {
  getBlogerList();
}, 400);

function focusUser(e: any, item: any, type: string) {
  request["check/operateFocus"]({ data: { id: item.id, type } }).then(
    (res: any) => {
      if (res.code == 200) {
        ElNotification({
          title: "success",
          message: res.msg,
          type: "success",
        });
      } else {
        ElNotification({
          title: "error",
          message: res.msg,
          type: "error",
        });
      }
      getBlogerList();
    }
  );
}

function changeUnRead(val: number) {
  let focusIndex = bolgerList.focusList.findIndex((v: any) => v.id == val);
  let normalIndex = bolgerList.normalList.findIndex((v: any) => v.id == val);
  if (focusIndex != -1) {
    bolgerList.focusList[focusIndex].unreadCount = 0;
  }
  if (normalIndex != -1) {
    bolgerList.normalList[normalIndex].unreadCount = 0;
  }
}

getBlogerList();

onUnmounted(() => {
  for (let v in timer) {
    clearInterval(timer[v]);
  }
});
</script>


<template>
  <div class="blogosphere">
    <div class="input_box">
      <el-input
        v-model.trim="keyword"
        placeholder="请输入关键词"
        @input="debouncSearch"
        clearable
      >
        <template #append><el-button @click="search" icon="Search" /></template>
      </el-input>
    </div>
    <div class="content">
      <template v-if="bolgerList.focusList.length">
        <div class="blog_title">关注列表</div>
        <div class="bloger_list">
          <div class="item" v-for="item in bolgerList.focusList" :key="item.id">
            <span class="unreadCount" v-if="item.unreadCount">{{
              item.unreadCount > 99 ? "99+" : item.unreadCount
            }}</span>
            <img :src="item.userPic || defaultPic" alt="" />
            <div class="name">{{ item.username || item.phoneNumber }}</div>
            <div class="tools" v-if="store.currentUser.id != item.id">
              <span v-if="item.focus" @click="focusUser($event, item, '2')"
                >取关</span
              >
              <span v-else @click="focusUser($event, item, '1')">关注</span>
              <span @click="privateLetter(item)">私信</span>
            </div>
          </div>
        </div>
      </template>

      <template v-if="bolgerList.normalList.length">
        <div class="blog_title">博客列表</div>
        <div class="bloger_list">
          <div
            class="item"
            v-for="item in bolgerList.normalList"
            :key="item.id"
          >
            <span class="myself" v-if="item.id == store.currentUser.id"
              >本人</span
            >
            <span class="unreadCount" v-if="item.unreadCount">{{
              item.unreadCount > 99 ? "99+" : item.unreadCount
            }}</span>
            <img :src="item.userPic || defaultPic" alt="" />
            <div class="name">{{ item.username || item.phoneNumber }}</div>
            <div class="tools" v-if="store.currentUser.id != item.id">
              <span v-if="item.focus" @click="focusUser($event, item, '2')"
                >取关</span
              >
              <span v-else @click="focusUser($event, item, '1')">关注</span>
              <span @click="privateLetter(item)">私信</span>
            </div>
          </div>
        </div>
      </template>
    </div>

    <Teleport to="body">
      <Session ref="sessionRef" @change-un-read="changeUnRead"></Session>
    </Teleport>
  </div>
</template>


<style lang="scss" scoped>
.blogosphere {
  height: calc(100vh - 70px);

  padding: 20px;
  .input_box {
    display: flex;
    justify-content: center;
    :deep() {
      .el-input {
        width: 30%;
      }
    }
  }
  .content {
    height: calc(100% - 70px);
    overflow-y: auto;
    margin-top: 30px;
    .blog_title {
      line-height: 40px;
      font-size: 18px;
      font-weight: bold;
    }
    .bloger_list {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        padding-bottom: 30px;
        position: relative;
        margin-right: 10px;
        margin-bottom: 15px;
        overflow: hidden;
        background-color: #f8f8f8;
        border-radius: 4px;
        .myself,
        .unreadCount {
          position: absolute;
          right: 0px;
          top: 0px;
          background-image: linear-gradient(45deg, #7d84fe, #9cd8ff);
          color: #fff;
          padding: 2px 4px;
          font-size: 14px;
          border-bottom-left-radius: 4px;
        }
        .unreadCount {
          background-image: linear-gradient(45deg, #ffbe16, #ffe356);
        }
        img {
          width: 45px;
          height: 45px;
        }
        .tools {
          width: 100%;
          position: absolute;
          bottom: -30px;
          left: 0px;
          display: flex;
          transition: all 0.2s;
          span {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            flex: 1;
            text-align: center;
            cursor: pointer;
            user-select: none;
            background-color: #7d84fe;
            color: #fff;
            &:nth-of-type(1) {
              border-right: 1px solid #fff;
            }
          }
        }
        .name {
          margin-top: 10px;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &:hover {
          .tools {
            bottom: 0px;
          }
        }
      }
    }
  }
}
</style>